<template>
    <div class="goods">
        <!--        <router-link tag="div" class="goods-item" v-for="(item,index) in goodslist" :key="item.id"-->
        <!--                     :to="'/home/goodsinfo/'+item.id">-->
        <!--            <img :src="item.img_url" alt="">-->
        <!--            <h1>{{ item.title }}</h1>-->
        <!--            <div class="info">-->
        <!--                <p class="price">-->
        <!--                    <span class="now">￥{{ item.sell_price }}</span>-->
        <!--                    <span class="old">￥{{ item.market_price }}</span>-->
        <!--                </p>-->
        <!--                <p class="sell">-->
        <!--                    <span>热卖中</span>-->
        <!--                    <span>剩{{ item.stock_quantity }}件</span>-->
        <!--                </p>-->
        <!--            </div>-->
        <!--        </router-link>-->


        <!--
        在网页中，有两种跳转方式
        方式1：使用 a 标签的形式，叫做标签跳转
        方式2：使用 window.location.href 的形式，叫做 编程式跳转
        -->
        <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="getDetail(item.id)">
            <img :src="item.img_url" alt="">
            <h1>{{ item.title }}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">￥{{ item.sell_price }}</span>
                    <span class="old">￥{{ item.market_price }}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{ item.stock_quantity }}件</span>
                </p>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>

</template>

<script>
    import {Toast} from 'mint-ui'

    export default {
        data() {
            return {
                pageindex: 1, // 分页的页数
                goodslist: [] // 存放商品列表的数组
            }
        },
        created() {
            this.getGoodsList()
        },
        methods: {
            getGoodsList() {
                this.$http.get("http://www.liulongbin.top:3005/api/getgoods?pageindex=" + this.pageindex).then(result => {
                    if (result.body.status === 0) {
                        // 因为要加载更多，不能直接复制，要用第一页的数据拼接上第二页的数据  使用 .concat 方法
                        // this.goodslist = result.body.message
                        this.goodslist = this.goodslist.concat(result.body.message)
                    } else {
                        Toast("获取数据失败")
                    }
                })
            },
            getMore() {
                this.pageindex++;
                this.getGoodsList()
            },
            getDetail(id){
                // 这是使用 JS 的形式进行路由导航
                // 注意：要区分 this.$route 和 this.router 这两个对象
                // this.$route 是路由参数对象，所有路由中的参数， params, query 都属于它
                // this.$router 是一个路由导航对象，用它可以方便的使用 JS 大妈实现路由的前进和后退，跳转到新的 URL 地址
                this.$router.push("/home/goodsinfo/" + id)

            }
        }
    }
</script>

<style scoped>
    .goods {
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        justify-content: space-between;
    }

    .goods .goods-item {
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        margin: 4px 0;
        padding: 2px;
        min-height: 278px;
    }

    .goods .goods-item img {
        width: 100%;
    }

    .goods-item h1 {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .goods-item .info {
        background-color: #eee;
    }

    .goods-item .info p {
        margin: 0;
        padding: 4px;
    }

    .goods-item .info .now {
        color: red;
        font-weight: bold;
        font-size: 16px;
    }

    .goods-item .info .old {
        text-decoration: line-through;
        font-size: 12px;
        margin-left: 10px;
    }

    .goods-item .info .sell {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
</style>